<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showswiper">
      <swiper-slide
        v-for="item of list"
        :key="item.id"
      ><img
          class="swiper-img"
          :src="item.imgUrl"
        > </swiper-slide>
      <div
        class="swiper-pagination"
        slot="pagination"
      ></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeSwiper",
  props:{
   list: Array
  },
  data() {
    return {
      swiperOption: {
        pagination: {
    el:'.swiper-pagination'
        },
        loop:true,
       }
    }
   
  },
   computed :{
showswiper(){
  return this.list.length
}
    }
};
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
 background : red !important 
.wrapper 
  overflow: hidden
  height: 0
  width: 100%
  padding-bottom: 31.25%
  .swiper-img 
   width: 100%

</style>

